<%= render Settings::ControlGroupComponent.new class: "mb-14" do |group| %>
  <% group.header do %>
    Payment Information
  <% end %>
  <% group.item do %>
    <%= render Settings::ControlRowComponent.new do |row| %>
      <% row.title do %>
        <span data-behavior="billing_details" class="text">Loading…</span>
      <% end %>
      <% row.control do %>
        <%= link_to "Edit", edit_settings_billing_path %>
      <% end %>
    <% end %>
  <% end %>
<% end %>


<%= render Settings::ControlGroupComponent.new class: "mb-14" do |group| %>
  <% group.header do %>
    Change Your Plan
  <% end %>
  <% @plans.each do |plan| %>
    <% group.item do %>
      <%= render Settings::ControlRowComponent.new do |row| %>
        <% row.title do %>
          <%= number_to_currency(plan.price, precision: 0) %>/<%= plan.period %>
        <% end %>
        <% row.control do %>
          <% if @user.plan.id == plan.id %>
              Your plan
          <% else %>
              <%= form_tag update_plan_settings_billing_path, data: { behavior: "change_plan" }, class: "no-margin" do %>
                  <%= hidden_field_tag "plan", plan.id %>
                  <%= button_tag "Switch to this plan", class: "button-text text-normal text-blue-600", data: { confirm: "Are you sure you want to switch to #{plan.name.downcase} billing?" } %>
              <% end %>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
  <% group.description do %>
    Plan changes are pro-rated.
  <% end %>
<% end %>

<%= render partial: "shared/billing/payment_history", locals: {limit: 12} %>

<%= render partial: "shared/billing/receipt_info" %>
